<template>
  <uni-popup ref="popup" type="center" @maskClick="close" :safe-area="false" mask-background-color="rgba(0,0,0,0.7)">
    <view class="msg-card">
      <view class="t-title">{{content}}</view>
      <view class="t-text">{{tips}}</view>
      <view class="m-btns">
        <custom-btn class="cancel-btn" @click="cancelFn" v-if="isCancel">取消</custom-btn>
        <custom-btn class="confirm-btn" @click="confirmFn">确定</custom-btn>
      </view>
    </view>
  </uni-popup>
</template>


<script setup>
const props = defineProps({
  content: {
    type: String,
    default: "确定选择该城市作为筛选条件吗？",
  },
  tips: {
    type: String,
    default: "选择后不可修改",
  },
  isCancel: {
    type: Boolean,
    default: true,
  },
});
const emits = defineEmits(["confirm"]);

const popup = ref();

const close = () => {
  popup.value.close();
};

const cancelFn = () => {
  close();
};
const confirmFn = () => {
  emits("confirm");
};

const init = () => {
  popup.value.open();
};

// 暴露
defineExpose({ open: init, close });
</script>

<style lang=scss scoped>
.msg-card {
  width: 650rpx;
  background: #fff;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  @include borderBox;
  .t-title,
  .t-text {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
  }

  .m-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40rpx;
  }
  .cancel-btn {
    width: 270rpx;
    height: 120rpx;
    line-height: 120rpx;
    font-weight: 500;
    font-size: 40rpx;
    color: #ccc;
    background: #ffffff;
    border-radius: 120rpx;
    border: 1rpx solid #dddddd;
  }

  .confirm-btn {
    width: 270rpx;
    height: 120rpx;
    line-height: 120rpx;
    font-weight: bold;
    font-size: 40rpx;
    color: #fff;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
  }
}
</style>